/**
 * @Title: select-address.js
 * @Description: select-address
 * @author: Fanchao
 * @date: 2020/9/28 2:17 上午
 * @version V1.0
 */
import React from 'react';
import { Map, Marker } from 'react-amap';
import { Drawer, Button, Input } from 'antd';
import './select-address.less';

const mapKey = '6b89c4ba1d8a7af4cc32f87e77830af6';


class SelectAddress extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            signAddrList: {
                name: '',
                address: '',
                longitude: 0,
                latitude: 0,
            },
            geocoder: '',
            searchContent: '',
            isChose: false,
        };
    }

    //改变数据通用方法(单层)

    changeData = (value, key) => {
        let { signAddrList } = this.state;
        signAddrList[key] = value;
        this.setState({
            signAddrList: signAddrList,
        });
    };

    placeSearch = (e) => {
        this.setState({ searchContent: e });
    };

    searchPlace = (e) => {
        console.log(1234, e);
    };


    render() {
        let { addressConfig, cb, selectAddressShow } = this.props;
        let { signAddrList } = this.state;

        const selectAddress = {
            created: (e) => {
                let auto;
                let geocoder;
                window.AMap.plugin('AMap.Autocomplete', () => {
                    auto = new window.AMap.Autocomplete({ input: 'tipinput' });
                });

                window.AMap.plugin(['AMap.Geocoder'], function () {
                    geocoder = new AMap.Geocoder({
                        radius: 1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
                        extensions: 'all',//返回地址描述以及附近兴趣点和道路信息，默认"base"
                    });
                });

                window.AMap.plugin('AMap.PlaceSearch', () => {
                    let place = new window.AMap.PlaceSearch({});
                    let _this = this;
                    window.AMap.event.addListener(auto, 'select', (e) => {
                        place.search(e.poi.name);
                        geocoder.getAddress(e.poi.location, function (status, result) {
                            if (status === 'complete' && result.regeocode) {
                                let address = result.regeocode.formattedAddress;
                                let data = result.regeocode.addressComponent;
                                let name = data.township + data.street + data.streetNumber;
                                _this.changeData(address, 'address');
                                _this.changeData(name, 'name');
                                _this.changeData(e.poi.location.lng, 'longitude');
                                _this.changeData(e.poi.location.lat, 'latitude');
                                _this.setState({ isChose: true });
                            }
                        });
                    });
                });
            },
            click: (e) => {
                const _this = this;
                var geocoder;
                var infoWindow;
                var lnglatXY = new AMap.LngLat(e.lnglat.lng, e.lnglat.lat);
                let content = '<div>定位中....</div>';

                window.AMap.plugin(['AMap.Geocoder'], function () {
                    geocoder = new AMap.Geocoder({
                        radius: 1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
                        extensions: 'all',//返回地址描述以及附近兴趣点和道路信息，默认"base"
                    });
                    geocoder.getAddress(e.lnglat, function (status, result) {
                        if (status === 'complete' && result.regeocode) {
                            let address = result.regeocode.formattedAddress;
                            let data = result.regeocode.addressComponent;
                            let name = data.township + data.street + data.streetNumber;

                            _this.changeData(address, 'address');
                            _this.changeData(name, 'name');
                            _this.changeData(e.lnglat.lng, 'longitude');
                            _this.changeData(e.lnglat.lat, 'latitude');
                            _this.setState({ isChose: true });
                        }
                    });
                });

            },
        };
        return (
            <div className='DrawerContainer'>
                <Drawer
                    title="店铺地址"
                    width={720}
                    onClose={() => cb({ show: false, signAddrList })}
                    visible={selectAddressShow}
                    footer={
                        <div style={{ textAlign: 'center' }}>
                            <Button onClick={() => cb({ show: false, signAddrList })}>关闭</Button>
                            <Button
                                style={{ marginLeft: '80px' }}
                                onClick={() => cb({ show: false, signAddrList })}
                                type="primary"
                            >
                                确定
                            </Button>
                        </div>
                    }
                >
                    <div>
                        <Input id="tipinput"
                            onChange={(e) => this.placeSearch(e.target.value)}
                            onKeyDown={(e) => this.searchPlace(e)} />
                    </div>
                    <div className='selectAddrWrapper'>详细地址:
                        <span className='name'>{signAddrList.address}</span>
                    </div>
                    <div style={{ width: '100%', height: '100%' }} className='mapContainer' id="content">
                        {
                            this.state.isChose ? (
                                <Map amapkey={mapKey}
                                    plugins={['ToolBar', 'Scale']}
                                    events={selectAddress}
                                    center={[signAddrList.longitude, signAddrList.latitude]}
                                    zoom={15}>
                                    <Marker position={[signAddrList.longitude, signAddrList.latitude]} />
                                </Map>
                            ) : (
                                    <Map amapkey={mapKey}
                                        plugins={['ToolBar', 'Scale']}
                                        events={selectAddress}
                                        zoom={15}>
                                        <Marker position={[signAddrList.longitude, signAddrList.latitude]} />
                                    </Map>
                                )
                        }
                    </div>
                </Drawer>
            </div>
        );
    }
}

export default SelectAddress;
